<template>
	<!-- border border-[red] -->
	<page-meta :page-style="'overflow:'+(suitstoure?'hidden':'visible')">
		<view class="pages">
			<view class="image ">
				<!-- <image class="w-[100%] h-[324rpx] " src="../../../../static/avatar.jpeg"></image> -->
				<!-- border border-[red] -->
				<view style="width: calc(100% - 40rpx);"
					class="bg-[#fff] mx-[20rpx] rounded-[20rpx]  top-[20rpx] fixed left-0  box-border py-[20rpx] px-[20rpx]">
					<view class="flex items-center justify-between">
						<view class="flex items-center">
							<view class="w-[130rpx] h-[130rpx] rounded-full">
								<u-avatar :size="60" :text="updetals.shopName.slice(-2)"  font-size="16" bg-color="#FFB041"></u-avatar>
							</view>
							<view class="ml-[20rpx]">
								<view class="pb-[10rpx] typeface">
									{{updetals.shopPhone}}
								</view>
								<!-- <view class="typefacephone flex">
								<view class="">
									商家联系人：{{store.busliasdetals.staffName}}
								</view>
							</view> -->
							</view>
						</view>
						<view class="pr-[0rpx] w-[61rpx] h-[61rpx] rounded-[50%] bg-[#fff4ea] center"
							@click="makeCall(updetals.shopPhone)">
							<image class="w-[35rpx] h-[43rpx]" src="@/static/homeimg/telpho.svg">
							</image>
						</view>
					</view>
					<!-- card 卡片 -->
					<view class="hu px-[40rpx] flex items-center h-[190rpx]  mt-[17rpx] rounded-[20rpx] ">
						<view class="flex-1">
							<view class="typeface1 pb-[10rpx]">
								余额(元)
							</view>
							<view class="typeface2">
								{{updetals.balance}}
							</view>
						</view>
						<view class="flex-1 ">
							<view class="px-[40rpx] typeface3 pb-[10rpx]">
								累计消费(元)
							</view>
							<view class="px-[40rpx] typeface4">
								{{updetals.totalCharge}}
							</view>
						</view>
						<image class="posisgs" src="@/static/homeimg/moneybgc.png" mode=""></image>
					</view>
					<!-- 按键选择 -->
					<view class="flex mt-[20rpx] justify-between">
						<view class="mr-[20rpx]">
							<up-button plain="true" color="#FE861C" class="btns" @click="shiyonshow">适用门店</up-button>
						</view>
						<view @click="gorecharge()" class="w-[71%]">
							<up-button color="#FE861C">充值</up-button>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="clear: both;"></view>
			<!-- <view class="h-[calc(var(--bottom-button-height)+0rpx)]"></view> -->
			<!-- border border-[#222222] -->
			<view style="width: calc(100% - 40rpx);" class="   h-[70vh]  pt-[500rpx]  mx-[20rpx]">
				<view class="flex  justify-around mt-[0rpx] py-[20rpx]">
					<view class="typefacetype flex">
						<view class="pr-[14rpx] flex items-center">
							消费类型
						</view>
						<view class="flex items-center" @click="moneytype=true">
							<image class="w-[30rpx] h-[28rpx] mt-[8rpx]" src="@/static/homeimg/bottomdown.svg"></image>
						</view>

					</view>
					<view class="typefacetype flex">
						<view class="pr-[14rpx] flex items-center">
							{{dangmonth}}
						</view>
						<view class="flex items-center" @click="yearmonthcose=true">
							<image class="w-[30rpx] h-[28rpx] mt-[8rpx]" src="@/static/homeimg/bottomdown.svg"></image>
						</view>
					</view>
				</view>
				<view class="bg-[#fff] rounded-t-[20rpx]">
					<view class="bg-[#fff] backline  px-[20rpx] pt-[40rpx] pb-[20rpx] text-[26rpx]">
						<view class="flex items-center">
							<image class="w-[36rpx] h-[36rpx] pr-[20rpx]" src="@/static/homeimg/rili.svg">
							</image>
							<view class="timetype">
								{{dangmonth}}
							</view>
						</view>
						<view class="flex mt-[20rpx] text-[#989898]">
							<view class="px-[12rpx] mr-[20rpx] bg-[#F6F6F6] py-[4rpx]">
								充值 <text class="text-[#FF2D2D]" decode> +{{detalsmoney.rechargeAmount}}</text> &ensp;
								<text>{{detalsmoney.rechargeNum}} 笔</text>
							</view>
							<view class="px-[12rpx]" style="background-color: rgba(246,246,246,1);">
								支出 -
								<text class="text-[#000000]" decode>{{detalsmoney.payAmount}}</text> &ensp;
								<text>{{detalsmoney.payNum}} 笔</text>
							</view>
						</view>
					</view>
				</view>
				<mescroll-uni :fixed="false" height="65%" class="bg-[#fff]" :sticky="true" @init="mescrollInit"
					@down="downCallback" :bottom="200" :up="upOption" @up="upCallback">
					<!-- orderData -->
					<view v-for="(item,index) in datalists" :key="index" class="font-['PingFang SC']"
						style="background-color: #fff;">
						<view class="mx-[20rpx] pb-[20rpx] pt-[20rpx] ">
							<view class="flex justify-between items-center  ">
								<view class="flex  items-center">
									<view class="relative bottom-[24rpx] mr-[10rpx]">
										<u-avatar size="20"
											:bg-color="item.type==1 || item.type==3 || item.type==5?'#FE861C':'#b4b4b4'"
											:text="item.type==1 || item.type==3 || item.type==5?'充':'支'"
											font-size="22rpx"></u-avatar>
									</view>
									<view class="">
										<view class="typeName">
											{{typestatus[item.type]}} - {{item.shopName}}
										</view>
										<view class="typetime mt-[10rpx]">
											{{item.createdAt}}
										</view>
									</view>
								</view>

								<view class="font-['PingFang SC']">
									<view class="" style="font-size: 30rpx; text-align: right;
												font-weight: bold;
												" :class="item.type==1 || item.type==3 || item.type==5?'text-[#F84343]':'text-[#000000]'">
										{{item.type==1 || item.type==3 || item.type==5?'+':'-'}}{{item.amount}}
									</view>
									<view class="mt-[20rpx]" style="font-size: 28rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #989898;">
										余额：{{item.balance}}
									</view>
								</view>
							</view>
						</view>
						<view class="oneboder" v-if="index!==datalists.length-1">

						</view>
					</view>
				</mescroll-uni>
			</view>
			<!-- 适用门店弹窗 -->
			<u-popup :show="suitstoure" closeable :round="10" mode="bottom" @close="suitstoure=false">
				<view class="text-center text-[34rpx] font-bold leading-[100rpx]">
					适用门店
				</view>
				<view class="px-[20rpx] mb-[80rpx]">
					<view class="spsbiwsas" v-for="(item,index) in storlist.list" :key="index"
						@click="getdetalbus(item)">
						<view class="felx center text-[28rpx]">
							<image class="w-[38rpx] h-[46rpx] mr-[10rpx]" src="@/static/homeimg/storeicon.svg">
							</image> {{item.storeName}}
						</view>
						<view class="center">
							<u-icon name="arrow-right" size="14"></u-icon>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 消费类型弹窗 -->
			<u-picker :show="moneytype" ref="uPicker" :columns="columns" @cancel="moneytype=false"
				@confirm="suremoney"></u-picker>
			<!-- 月份选中弹窗 -->
			<u-picker :show="yearmonthcose" ref="uPickers" :columns="columns1" @cancel="yearmonthcose=false"
				@confirm="suremoney1"></u-picker>

		</view>
	</page-meta>
</template>

<script setup>
	
	import {
		oredrlist,
	} from '@/api/order.js'
	import {
		storevlueuserbills,
		applystorestore,
		membervipdetals
	} from "@/api/home.js"
	import dayjs from 'dayjs';
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'
	import {
		onPageScroll,
		onReachBottom,
		onLoad
	} from '@dcloudio/uni-app';
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import {
		useStore
	} from '@/stores/user.js'
	const randoms = ref(Math.floor(Math.random() * 14));
	const store = useStore();
	import {
		storeToRefs
	} from 'pinia'
	let {
		busliasdetals
	} = storeToRefs(store);
	//消费类型弹窗
	const moneytype = ref(false)
	const columns = reactive([
		['全部', '充值', "支付"]
	]);
	const columns1 = ref([

	]);
	const typestatus = {
		1: "充值",
		2: "下单支出",
		3: "退款",
		4: "商家扣款",
		5: "商家充值"
	}
	import datanull from "@/static/homeimg/datanull.png"
	const upOption = {
		page: {
			size: 10 // 每页数据的数量,默认10
		},
		noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
		empty: {
			top: 400,
			tip: '暂无记录',
			icon: datanull,
		}
	}
	const suremoney = (e) => {
		console.log(e.indexs[0], "选中")
		if (e.indexs[0] == 0) {
			parms.type = ""
		} else if (e.indexs[0] == 1) {
			parms.type = 1
		} else if (e.indexs[0] == 2) {
			parms.type = 2
		}
		moneytype.value = false
		const mescroll = getMescroll()
		mescroll.num = 1
		upCallback(mescroll)
	}
	const suremoney1 = (e) => {
		console.log(e.value[0], "选中1")
		dangmonth.value = e.value[0]
		yearmonthcose.value = false
		parms.month = e.value[0].slice(-2)
		parms.year = e.value[0].slice(0, 4)
		const mescroll = getMescroll()
		mescroll.num = 1
		upCallback(mescroll)

	}
	//适用门店弹窗
	const suitstoure = ref(false)
	const storlist = reactive({
		list: []
	})
	const shiyonshow = () => {
		applystorestore({
			shopId: updetals.value.shopId
		}).then(res => {
			if (res.code == 200) {
				if (res.result.data.length > 0) {
					suitstoure.value = true
					storlist.list = res.result.data
				} else {
					uni.showToast({
						icon: "none",
						title: "暂无适用门店"
					})
				}
			} else {
				uni.showToast({
					icon: "none",
					title: res.msg
				})
			}
		})
	}
	//跳转商家
	// const getdetalbus = (item) => {
	// 	uni.navigateTo({
	// 		url: "/page_index/storedetals?id=" + item.id + '&deliveryPrice=' + item.deliveryPrice
	// 	})
	// 	suitstoure.value = false
	// }
	import {
		useAppStore
	} from '@/stores/app.js'
	//跳转商家
	const getdetalbus = (item) => {
		useAppStore().getcategory(item.id, item.deliveryPrice)
	}
	//充值跳转
	let gorecharge = () => {
		uni.navigateTo({
			url: '/page_my/recharge/recharge?id=' + bulisId.value + '&storeName=' + updetals.value.shopName +
				'&balance=' + store.busliasdetals.balance
		})
	}
	//商家id
	const bulisId = reactive({})
	const busid = ref(0)
	const updetals = ref({})
	onLoad((e) => {
		bulisId.value = e.detals
		busid.value = e.id
		membervipdetals({
			id: e.id
		}).then(res => {
			if (res.code == 200) {
				updetals.value = res.result
			}
		})
	})
	console.log("dayjs().month()",dayjs().month()+1);
	const parms = reactive({
		page: 1,
		limit: 10,
		type: "",
		month: dayjs().month()+1,
		year: dayjs().year(),

	})
	const datalists = ref([])
	const detalsmoney = ref({
		disburse: 0,
		disburseNum: 0,
		topup: 0,
		topupNum: 0,
	})
	//拨打电话
	const makeCall = (e) => {
		uni.makePhoneCall({
			// 手机号
			phoneNumber: e,
			// 成功回调
			success: (res) => {
				console.log('调用成功!')
			},
			// 失败回调
			fail: (res) => {
				console.log('调用失败!')
			}
		});
	}
	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(onPageScroll, onReachBottom)
	let orderData = ref([])
	const upCallback = (mescroll) => {
		// console.log("tabsIndex.value+1", tabsIndex.value + 1);
		setTimeout(() => {
			parms.page = mescroll.num
			parms.limit = mescroll.size
			storevlueuserbills({
				...parms,
				shopId: bulisId.value
			}).then(res => {
				if (res.code === 200) {
					detalsmoney.value.payNum = res.result.payNum
					detalsmoney.value.payAmount = res.result.payAmount
					detalsmoney.value.rechargeAmount = res.result.rechargeAmount
					detalsmoney.value.rechargeNum = res.result.rechargeNum
					const list = res.result.data || []
					if (mescroll.num === 1) datalists.value = []
					datalists.value = datalists.value.concat(list)
					console.log('list', datalists.value);
					mescroll.endBySize(list.length, res.result.total)
				}
			}).catch(() => {
				mescroll.endErr()
			})
		}, 500)
	}
	//获取三个月的时间
	let candidatesTime = reactive({
		selectList: [

		]
	})


	// 获取当月的日期范围
	const dangmonth = ref('')
	const currentMonthStart = dayjs().startOf('month');
	candidatesTime.selectList[0] = currentMonthStart.format('YYYY-MM')
	const currentMonthEnd = dayjs().endOf('month');

	// 获取上个月的日期范围
	const lastMonthStart = dayjs().subtract(1, 'month').startOf('month');
	candidatesTime.selectList[1] = lastMonthStart.format('YYYY-MM')
	const lastMonthEnd = dayjs().subtract(1, 'month').endOf('month');
	// 获取上上个月的日期范围
	let previousTwoMonthStart;
	let previousTwoMonthEnd;
	if (dayjs().month() === 0) {
		previousTwoMonthStart = dayjs().subtract(1, 'year').month(11).startOf('month');
		candidatesTime.selectList[2] = previousTwoMonthStart.format('YYYY-MM')
		previousTwoMonthStart = dayjs().subtract(1, 'year').month(10).startOf('month');
		candidatesTime.selectList[2] = previousTwoMonthStart.format('YYYY-MM')
	} else {
		previousTwoMonthStart = dayjs().subtract(2, 'month').startOf('month');
		candidatesTime.selectList[2] = previousTwoMonthStart.format('YYYY-MM')
	}
	dangmonth.value = candidatesTime.selectList[0]
	// console.log("三个月", candidatesTime)
	columns1.value = [candidatesTime.selectList]
	const yearmonthcose = ref(false)
</script>

<style lang="scss" scoped>
	.spsbiwsas {
		height: 106rpx;
		line-height: 106rpx;
		border-bottom: 1px solid #EFEFEF;
		display: flex;
		justify-content: space-between;

		.titlkd {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			white-space: nowrap;
		}

		.spstext {
			color: #393939;
		}
	}

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.typeName {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.typetime {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #989898;
	}

	.timetype {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #141516;
	}

	.pages {
		// --bottom-button-height: 120rpx;
		height: 100vh;
		// background: url('@/static/homeimg/bgc.png') no-repeat;
		// background-size: 100% 100%;
		// border: green 1px solid;
		overflow: hidden;
	}

	.image {
		z-index: 10;
		position: fixed;
		width: 100%;
	}

	.hu {
		// // height: 200rpx;
		// background: url('@/static/homeimg/moneybgc.png') no-repeat;
		// background-size: 100% 100%;
		position: relative;

		.posisgs {
			width: 100%;
			height: 190rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}
	}

	.typefacetype {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #323232;
	}

	.typeface1 {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #5E6065;
	}

	.typeface2 {
		font-size: 46rpx;
		font-family: DIN;
		font-weight: 500;
		color: #1A1A1B;
	}

	.typeface3 {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #5E6065;
	}

	.typeface4 {
		font-size: 46rpx;
		font-family: DIN;
		font-weight: 500;
		color: #1A1A1B;
	}

	.typeface {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1A1B1C;
	}

	.boderbottom {
		border-bottom: 1rpx solid #EFEFEF;
	}

	.typefacephone {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
	}

	.btns {
		word-wrap: none;
	}

	::v-deep .u-button.data-v-5ce41ee6 {
		border-radius: 10rpx;
	}

	.backline {
		// background:url("../../../static/homeimg/bckroundcolor.png");
		background: url('@/static/homeimg/bckroundcolor.png') no-repeat;
		background-size: 100% 100%;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.oneboder {
		border-bottom: 1px solid #efefef;
		transform: scaleY(.5);
	}
</style>